<template>
  <div class="page">
    <div class="body">
      <Home
        v-if="tabindex==1"
        style="height: 100%;overflow-y: auto;"
      />
      <Order
        v-if="tabindex==0"
        style="height: 100%;overflow-y: auto;"
      />
      <Mine
        v-if="tabindex==2"
        style="height: 100%;overflow-y: auto;"
      />
    </div>
    <div class="tabbar">
      <tabbar @tabHandle="tabHandle" />
    </div>
  </div>
</template>

<script>
import Order from "../order/index.vue";
import Home from "../home/index.vue";
import Mine from "../mine/index.vue";
export default {
  components: {
    Order,
    Home,
    Mine,
  },
  created() {
    let lang = localStorage.getItem("lang");
    if (lang != undefined) {
      this.$i18n.locale = lang;
    }
  },
  mounted() {},
  data() {
    return {
      tabindex: 1,
    };
  },
  methods: {
    tabHandle(idx) {
      this.tabindex = idx;
    },
  },
};
</script>


<style scoped>
.page {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.body {
  flex: 1;
  overflow-y: auto;
}

.tabbar {
  background-color: #ffffff;
  padding-bottom: 20px;
  padding-top: 12px;
}
</style>